<template>
  <div id="myChart" :style="{width: '1400px', height: '600px'}"></div>
</template>
<script>

import request from "../../utils/request";

export default {
    name:"Statistics",
  data() {
      return{
        meta: {
          requireAuth: true
        }
      }
  },
  created(){
      let _this = this;
      request.get("echarts/getEcharts").then(function (res) {
        // 基于准备好的dom，初始化echarts实例
        console.log(res)
        let myChart = _this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        var dataName=["总人数","未审核","审核通过","已结束","已取消","已签到","未签到","补签"];
         var dataValue = res
        myChart.setOption({
          title: {
            text: '会议的签到和补签情况'
          },
          tooltip: {},
          legend: {
            data:['人']
          },
          grid: [
            {x: '7%', y: '7%',  width:'38%', height: '38%'},
          ],
          xAxis: [
            {
              gridIndex:0,
              data: dataName
            }
          ],
          yAxis: [
            {
              gridIndex:0
            }
          ],
          series: [
            {
              name: '人数',
              type: 'bar',
              data: dataValue
            },
            {
              type: 'pie',
              data: [
                {value:dataValue[0],name:dataName[0]},
                {value:dataValue[1],name:dataName[1]},
                {value:dataValue[2],name:dataName[2]},
                {value:dataValue[3],name:dataName[3]},
                {value:dataValue[4],name:dataName[4]},
                {value:dataValue[5],name:dataName[5]},
                {value:dataValue[6],name:dataName[6]},
                {value:dataValue[7],name:dataName[7]},
                {value:dataValue[8],name:"人脸签到"},
                {value:dataValue[9],name:"图片签到"},
              ],
              radius:'40%',
              center:['75%','30%']
            }
          ]
        });
      });
  }
}
</script>

<style lang="less" scoped>

</style>